﻿<template>
  <div v-if = "show">
    <el-form label-position = "top" class = 'formItenConfig'>
      <el-row :gutter = "20">
        <el-col :span = '12'>
          <el-form-item label = "数据绑定Key">
            <el-input v-model = "formItemConfig.model"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "标题" v-if = "formItemConfig.type != 'grid'">
            <el-input v-model = "formItemConfig.name"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '24'>
          <el-form-item label = "描述" v-if = "Object.keys(formItemConfig.options).indexOf('desc')>=0">
            <el-input type="textarea" :rows="2">{{formItemConfig.desc}}</el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "占位内容" v-if = "Object.keys(formItemConfig.options).indexOf('placeholder')>=0 && (formItemConfig.type!='time' && formItemConfig.type!='date')">
            <el-input v-model = "formItemConfig.options.placeholder"></el-input>
          </el-form-item>
        </el-col>
        <!-- 时间日期相关 -->
        <el-col :span = '12'>
          <el-form-item label = "显示类型" v-if = "formItemConfig.type == 'date'">
            <el-select v-model = "formItemConfig.options.type">
              <el-option value = "year"></el-option>
              <el-option value = "month"></el-option>
              <el-option value = "date"></el-option>
              <el-option value = "dates"></el-option>
              <el-option value = "datetime"></el-option>
              <el-option value = "datetimerange"></el-option>
              <el-option value = "daterange"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否为范围选择" v-if = "formItemConfig.type == 'time'">
            <el-switch v-model = "formItemConfig.options.isRange">
            </el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "范围分隔符" v-if = "formItemConfig.options.isRange || formItemConfig.options.type=='datetimerange' || formItemConfig.options.type=='daterange'">
            <el-input v-model = "formItemConfig.options.rangeSeparator"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "占位内容" v-if = "(!formItemConfig.options.isRange && formItemConfig.type == 'time') || (formItemConfig.type == 'date' && formItemConfig.options.type != 'datetimerange' && formItemConfig.options.type != 'daterange')">
            <el-input v-model = "formItemConfig.options.placeholder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "开始时间占位内容" v-if = "(formItemConfig.options.isRange) || formItemConfig.options.type=='datetimerange' || formItemConfig.options.type=='daterange'">
            <el-input v-model = "formItemConfig.options.startPlaceholder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "结束时间占位内容" v-if = "formItemConfig.options.isRange || formItemConfig.options.type=='datetimerange' || formItemConfig.options.type=='daterange'">
            <el-input v-model = "formItemConfig.options.endPlaceholder"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "格式" v-if = "formItemConfig.type == 'time' || formItemConfig.type == 'date'">
            <el-input v-model = "formItemConfig.options.format"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "默认值" v-if = "formItemConfig.type=='time' && Object.keys(formItemConfig.options).indexOf('isRange')>=0">
            <el-time-picker
              key = "1"
              style = "width: 100%;"
              v-if = "!formItemConfig.options.isRange"
              v-model = "formItemConfig.options.defaultValue"
              :value-format = "formItemConfig.options.format"
            >
            </el-time-picker>
            <el-time-picker
              key = "2"
              v-if = "formItemConfig.options.isRange"
              style = "width: 100%;"
              v-model = "formItemConfig.options.defaultValue"
              is-range
              :value-format = "formItemConfig.options.format"
            >
            </el-time-picker>
          </el-form-item>
        </el-col>
        <!-- 时间日期相关（结束） -->
        <el-col :span = '12'>
          <el-form-item label = "默认值" v-if = "Object.keys(formItemConfig.options).indexOf('defaultValue')>=0 && (formItemConfig.type == 'textarea' || formItemConfig.type == 'number' || formItemConfig.type == 'input' || formItemConfig.type=='rate' || formItemConfig.type=='color' || formItemConfig.type=='switch')">
          <el-input v-if = "formItemConfig.type=='textarea'" type = "textarea" autosize v-model = "formItemConfig.options.defaultValue"></el-input>
          <el-input v-if = "formItemConfig.type=='input'" v-model = "formItemConfig.options.defaultValue"></el-input>
          <el-input-number v-if = "formItemConfig.type=='number'" v-model = "formItemConfig.options.defaultValue"></el-input-number>
          <el-rate v-if = "formItemConfig.type == 'rate'" style="display:inline-block;vertical-align: middle;" :max = "formItemConfig.options.max" :allow-half = "formItemConfig.options.allowHalf" v-model = "formItemConfig.options.defaultValue"></el-rate>
          <el-button type = "text" v-if = "formItemConfig.type == 'rate'" style="display:inline-block;vertical-align: middle;margin-left: 10px;" @click = "formItemConfig.options.defaultValue=0">清空</el-button>
          <el-color-picker v-if = "formItemConfig.type == 'color'" v-model = "formItemConfig.options.defaultValue" :show-alpha = "formItemConfig.options.showAlpha"></el-color-picker>
          <el-switch v-if = "formItemConfig.type=='switch'" v-model = "formItemConfig.options.defaultValue"></el-switch>
        </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "文件最大上传数" v-if = "Object.keys(formItemConfig.options).indexOf('limit')>=0">
            <el-input-number v-model = "formItemConfig.options.limit" :step = "1" :min = '1'></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "宽度" v-if = "Object.keys(formItemConfig.options).indexOf('width')>=0">
            <el-input v-model = "formItemConfig.options.width"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "高度" v-if = "Object.keys(formItemConfig.options).indexOf('height')>=0">
            <el-input v-model = "formItemConfig.options.height"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "按钮类型" v-if = "formItemConfig.type == 'button' || formItemConfig.type == 'bottomButton'">
            <el-select v-model = 'formItemConfig.options.type'>
              <el-option label = 'primary' value = 'primary'></el-option>
              <el-option label = 'success' value = 'success'></el-option>
              <el-option label = 'warning' value = 'warning'></el-option>
              <el-option label = 'danger' value = 'danger'></el-option>
              <el-option label = 'info' value = 'info'></el-option>
              <el-option label = 'text' value = 'text'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "每页显示条目个数" v-if = "Object.keys(formItemConfig.options).indexOf('pageSize')>=0">
            <el-select v-model = 'formItemConfig.options.pageSize'>
              <el-option label = 10 value = 10></el-option>
              <el-option label = 25 value = 25></el-option>
              <el-option label = 50 value = 50></el-option>
              <el-option label = 100 value = 100></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "tab标签类型" v-if = "formItemConfig.type == 'tabs'">
            <el-select v-model = 'formItemConfig.options.tabType'>
              <el-option label = 'card' value = 'card'></el-option>
              <el-option label = 'border-card' value = 'border-card'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "布局方式" v-if = "Object.keys(formItemConfig.options).indexOf('inline')>=0">
            <el-radio-group v-model = "formItemConfig.options.inline" size = 'small'>
              <el-radio-button :label = "false">块级</el-radio-button>
              <el-radio-button :label = "true">行内</el-radio-button>
            </el-radio-group>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "显示输入框" v-if = "Object.keys(formItemConfig.options).indexOf('showInput')>=0">
            <el-switch v-model = "formItemConfig.options.showInput" ></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "最小值(不做限制时，可不修改此值)" v-if = "Object.keys(formItemConfig.options).indexOf('min')>=0">
            <el-input-number v-model = "formItemConfig.options.min" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "最大值(不做限制时，可不修改此值)" v-if = "Object.keys(formItemConfig.options).indexOf('max')>=0">
            <el-input-number v-model = "formItemConfig.options.max" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "步长" v-if = "Object.keys(formItemConfig.options).indexOf('step')>=0">
            <el-input-number v-model = "formItemConfig.options.step" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "精度" v-if = "Object.keys(formItemConfig.options).indexOf('precision')>=0">
            <el-input-number v-model = "formItemConfig.options.precision" :min = "0" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "可输入最大长度(0表示不限制)" v-if = "Object.keys(formItemConfig.options).indexOf('maxLength')>=0">
            <el-input-number v-model = "formItemConfig.options.maxLength" :min = '0' :step = "1" :precision = '0'></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否使用控制按钮" v-if = "Object.keys(formItemConfig.options).indexOf('controlsShow')>=0">
            <el-switch v-model = "formItemConfig.options.controlsShow"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "对齐方式" v-if = "Object.keys(formItemConfig.options).indexOf('textAlign')>=0">
            <el-select v-model = 'formItemConfig.options.textAlign'>
              <el-option label = '左对齐' value = 'left'></el-option>
              <el-option label = '右对齐' value = 'right'></el-option>
              <el-option label = '居中' value = 'center'></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "当前页" v-if = "Object.keys(formItemConfig.options).indexOf('currentPage')>=0">
            <el-input-number v-model = "formItemConfig.options.currentPage" :min = "1" :step = "1"></el-input-number>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "支持透明度选择" v-if = "Object.keys(formItemConfig.options).indexOf('showAlpha')>=0">
            <el-switch v-model = "formItemConfig.options.showAlpha"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否多选" v-if = "formItemConfig.type=='select'">
            <el-switch v-model = "formItemConfig.options.multiple" @change = "handleSelectMuliple"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "允许半选" v-if = "Object.keys(formItemConfig.options).indexOf('allowHalf')>=0">
            <el-switch v-model = "formItemConfig.options.allowHalf"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否显示分数" v-if = "Object.keys(formItemConfig.options).indexOf('showScore')>=0">
            <el-switch v-model = "formItemConfig.options.showScore"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否显示表单前label" v-if = "Object.keys(formItemConfig.options).indexOf('showLabel')>=0">
            <el-switch v-model = "formItemConfig.options.showLabel"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否为斑马纹表格" v-if = "Object.keys(formItemConfig.options).indexOf('stripe')>=0">
            <el-switch v-model = "formItemConfig.options.stripe"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否显示边框" v-if = "Object.keys(formItemConfig.options).indexOf('border')>=0">
            <el-switch v-model = "formItemConfig.options.border"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "标签的宽度是否自撑开" v-if = "Object.keys(formItemConfig.options).indexOf('stretch')>=0">
            <el-switch v-model = "formItemConfig.options.stretch"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "是否隐藏" v-if = "Object.keys(formItemConfig.options).indexOf('isHidden')>=0">
            <el-switch v-model = "formItemConfig.options.isHidden"></el-switch>
          </el-form-item>
        </el-col>
        <el-col :span = '12'>
          <el-form-item label = "设置联动操作" v-if = "Object.keys(formItemConfig.options).indexOf('linkageOption')>=0">
            <el-input type = "text" @focus = 'showSettingNormalLinkageDialog' value = '点击设置表单联动操作' size = "mini"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label = "设置该元素隐藏表达式" v-if = "Object.keys(formItemConfig.options).indexOf('hiddenExpress')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.options.hiddenExpress' autosize placeholder="设置该元素隐藏表达式(JSON结构)"></el-input>
      </el-form-item>
      <el-form-item label = "设置该元素只读表达式" v-if = "Object.keys(formItemConfig.options).indexOf('disabledExpress')>=0">
        <el-input type = "textarea" v-model = 'formItemConfig.options.disabledExpress' autosize placeholder = "设置该元素只读表达式(JSON结构)"></el-input>
      </el-form-item>
      <el-row>
        <el-col :span="12">
          <el-form-item label = "是否自动从数据中获取表头" v-if = "formItemConfig.type == 'table' && Object.keys(formItemConfig.options).indexOf('isAutoColumnFromData')>=0">
            <el-switch el-switch v-model = "formItemConfig.options.isAutoColumnFromData"></el-switch>
          </el-form-item>
        </el-col>
      </el-row>
      <!-- 普通的表格 -->
      <el-form-item label = "定义表头" v-if = "formItemConfig.type == 'table' && !formItemConfig.options.isAutoColumnFromData">
        <template>
          <div class = "addColumn">
            <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加表头</p>
          </div>
          <el-table :data = 'formItemConfig.tableColumn' style = "width:100%" empty-text = "暂无表头数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'text' label = '表头名称'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.text" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'indexName' label = '表头键名'>
              <template slot-scope="scope">
                <el-input v-model = "scope.row.indexName" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'isFile' label = '是文件' width = '70px'>
              <template slot-scope = "scope">
                <el-switch v-model = "scope.row.isFile" @change = 'tableIsFile(scope.row)'></el-switch>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'isBoolean' label = 'isBoolean' width = '70px'>
              <template slot-scope = "scope">
                <el-switch v-model = "scope.row.isBoolean" :disabled = 'scope.row.isFile'></el-switch>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "30">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
      <!-- 可编辑的表格 -->
      <el-form-item label = "定义可编辑表格表头" v-if = "formItemConfig.type == 'editTable'">
        <template>
          <div class = "addColumn">
            <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加表头</p>
          </div>
          <el-table :data = 'formItemConfig.tableColumn' style="width:100%" empty-text = "暂无表头数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'text' label = '表头名称'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.text" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align="center" prop = 'indexName' label = '表头键名'>
              <template slot-scope="scope">
                <el-input v-model="scope.row.indexName" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'uiType' label = '控件类型'>
              <template slot-scope = "scope">
                <el-select v-model= "scope.row.uiType" placeholder = '请选择'>
                  <el-option value = 'input' label = '普通文本'></el-option>
                  <el-option value = 'label' label = '只读文本'></el-option>
                  <el-option value = 'textarea' label = '多行文本'></el-option>
                  <el-option value = 'singleSelect' label = '下拉框（单选）'></el-option>
                  <el-option value = 'multiSelect' label = '下拉框（多选）'></el-option>
                  <el-option value = 'switch' lable = '开关'></el-option>
                  <el-option value = 'date' label = '日期选择器'></el-option>
                  <el-option value = 'time' label = '时间选择器'></el-option>
                  <el-option value = 'datetime' label = '时间日期选择器'></el-option>
                  <el-option value = 'richText' label = '富文本'></el-option>
                  <el-option value = 'file' label = '文件'></el-option>
                  <el-option value = 'readFile' label = '文件(只读)'></el-option>
                </el-select>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = '数据来源' :render-header = 'handelHelp' label-class-name = "下拉框类型时，需要点击设置数据来源">
              <template slot-scope = "scope">
                <span :class = "(scope.row.uiType === 'multiSelect' || scope.row.uiType === 'singleSelect') ? 'clickStatus' : ''"
                @click = "(scope.row.uiType === 'multiSelect' || scope.row.uiType === 'singleSelect') ? showSettingSelectOptionDialog(scope.row, scope.$index) : ''">{{(scope.row.uiType === 'multiSelect' || scope.row.uiType === 'singleSelect') ? '点击设置' : '无需设置'}}</span>
              </template>
            </el-table-column>
            <el-table-column align = "center" prop = 'linkageOption' label = '数据联动' :render-header = 'handelHelp' label-class-name = "可以设置该字段变化时，是否影响其它的字段">
              <template slot-scope = "scope">
                <span :class = "(Object.keys(scope.row).indexOf('linkageOption')>=0 && scope.row.uiType !== 'richText' && scope.row.uiType !== 'file' && scope.row.uiType !== 'label' && scope.row.uiType !== 'switch' && scope.row.uiType !== 'textarea') ? 'clickStatus' : ''"
                @click = "(Object.keys(scope.row).indexOf('linkageOption')>=0 && scope.row.uiType !== 'richText' && scope.row.uiType !== 'file' && scope.row.uiType !== 'label' && scope.row.uiType !== 'switch' && scope.row.uiType !== 'textarea') ? showSettingLinkageDialog(scope.row, scope.$index) : ''">
                  {{(Object.keys(scope.row).indexOf('linkageOption')>=0 && scope.row.uiType !== 'richText' && scope.row.uiType !== 'file' && scope.row.uiType !== 'label' && scope.row.uiType !== 'switch' && scope.row.uiType !== 'textarea') ? '点击设置' : '无需设置'}}
                </span>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "30">
              <template slot-scope = "scope">
                <el-button type="text" size = "mini" @click="handleOptionsRemove(scope.$index)" title = '移除'>
                  <i class="iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </template>
      </el-form-item>
      <!-- 下拉框的option -->
      <el-form-item label = "选项数据" v-if = "Object.keys(formItemConfig.options).indexOf('options')>=0">
        <el-radio-group v-model = "formItemConfig.options.remote" size = 'small' style = "margin-bottom:10px;display: block">
          <el-radio-button :label = "false">静态数据</el-radio-button>
          <el-radio-button :label = "true">服务数据</el-radio-button>
        </el-radio-group>
        <template v-if = "formItemConfig.options.remote">
          <div class = 'formItem_hadPrepend'>
            <div style = 'margin-bottom: 6px'>
              <span style = 'display: inline-block; width: 80px;'>服务方法：</span>
              <el-select size = "mini" v-model="formItemConfig.options.remoteFunc" style = 'display: inline-block' clearable filterable>
                <el-option v-for = 'eventItem in allEvents' :key = 'eventItem.no' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
              </el-select>
              <span style = 'display: inline-block; width: 90px;margin-left: 20px' v-if = "Object.keys(formItemConfig.options).indexOf('inputDic')>=0">服务词典表：</span>
              <el-input type = "text" @focus = 'setOptionsEventsDic' value = '点击设置服务词典表' size = "mini" v-if = "Object.keys(formItemConfig.options).indexOf('inputDic')>=0" style = 'display: inline-block; width: auto'></el-input>
            </div>
            <div style = 'margin-bottom: 6px'>
              <span style = 'display: inline-block; width: 80px;'>value名称：</span>
              <el-input size = "mini" v-model = "formItemConfig.options.props.value" style = 'display: inline-block; width: auto'></el-input>
              <span style = 'display: inline-block; width: 90px;margin-left: 20px'>label名称：</span>
              <el-input size = "mini" v-model = "formItemConfig.options.props.label" style = 'display: inline-block; width: auto'></el-input>
            </div>
          </div>
        </template>
        <template v-else>
          <template v-if = "formItemConfig.type == 'radio' || (formItemConfig.type=='select' && !formItemConfig.options.multiple)">
            <ul class = 'clear' style = 'padding-left: 26px;'>
              <li class = 'left' style = 'width:100px; text-align: center'>值</li>
              <li class = 'left' style = 'width:100px; text-align: center'>展示的label</li>
            </ul>
            <el-radio-group v-model = "formItemConfig.options.defaultValue" style = "margin-bottom:10px;display: block">
              <draggable tag="ul" :list = "formItemConfig.options.options" v-bind = "{group:{ name:'options'},handle: '.drag-item'}" handle=".drag-item">
                <li v-for = "(item, index) in formItemConfig.options.options" :key = "index" >
                  <el-radio :label = "item.value"  style = "margin-right: 5px;">
                    <el-input style = "width:100px;" size="mini" v-model = "item.value"></el-input>
                    <el-input style = "width:100px;" size="mini" v-model = "item.label"></el-input>
                  </el-radio>
                  <i class = "drag-item" style = "font-size: 16px;margin: 0 5px;cursor: move;"><i class="iconfont icon-tuodong"></i></i>
                  <el-button @click = "handleOptionsRemove(index)" circle plain type = "danger" size = "mini" icon = "iconfont icon-shanchu" style = "padding: 4px;margin: 5px 0 0 5px;"></el-button>
                </li>
              </draggable>
            </el-radio-group>
          </template>
          <template v-if = "formItemConfig.type=='checkbox' || (formItemConfig.type=='select' && formItemConfig.options.multiple)">
            <el-checkbox-group v-model = "formItemConfig.options.defaultValue">
              <draggable tag="ul" :list = "formItemConfig.options.options" v-bind = "{group:{ name:'options'},handle: '.drag-item'}" handle = ".drag-item">
                <li v-for = "(item, index) in formItemConfig.options.options" :key = "index" >
                  <el-checkbox  :label = "item.value" style = "margin-right: 5px;" >
                    <el-input style = "width:100px;" size = "mini" v-model = "item.value"></el-input>
                    <el-input style = "width:100px;" size = "mini"  v-model = "item.label"></el-input>
                  </el-checkbox>
                  <i class = "drag-item" style = "font-size: 16px;margin: 0 5px;cursor: move;"><i class = "iconfont icon-tuodong"></i></i>
                  <el-button @click = "handleOptionsRemove(index)" circle plain type = "danger" size = "mini" icon = "iconfont icon-shanchu" style = "padding: 4px;margin: 5px 0 0 5px;"></el-button>
                </li>
              </draggable>
            </el-checkbox-group>
          </template>
          <div style = "margin-left: 22px;">
            <el-button type = "primary" size = 'small' @click = "handleAddOption"><i class = 'iconfont icon-add'></i>添加选项</el-button>
          </div>
        </template>
      </el-form-item>
      <!-- 栅格布局部分 -->
      <template v-if = "formItemConfig.type == 'grid'">
        <el-row :gutter = "20">
          <el-col :span = '12'>
            <el-form-item label = "列配置项">
              <draggable tag = "ul" :list = "formItemConfig.columns"  v-bind = "{group:{ name:'options'}, handle: '.drag-item'}" handle = ".drag-item" >
                <li v-for = "(item, index) in formItemConfig.columns" :key = "index" >
                  <i class = "drag-item" style = "font-size: 16px;margin: 0 5px;cursor: move;"><i class = "iconfont icon-tuodong"></i></i>
                  <el-input placeholder = "栅格值" size="mini" style = "width: 100px;" type = "number" v-model.number = "item.span"></el-input>
                  <el-switch v-if = "Object.keys(item).indexOf('isButtonGroup') !== -1" v-model = 'item.isButtonGroup' active-text = "按钮组"></el-switch>
                  <el-button @click="handleOptionsRemove(index)" circle plain type = "danger" size = "mini" icon = "iconfont icon-shanchu" style = "padding: 4px;margin-left: 5px;"></el-button>
                </li>
              </draggable>
              <div style = "margin: 10px 0 0 22px;">
                <el-button type = "primary" size = 'small' @click = "handleAddColumn"><i class = 'iconfont icon-add'></i>添加列</el-button>
              </div>
            </el-form-item>
          </el-col>
          <el-col :span = '12'>
            <el-form-item label = "栅格间隔">
              <el-input type = "number" v-model.number = "formItemConfig.options.gutter"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span = '12'>
            <el-form-item label = "水平排列方式">
              <el-select v-model = "formItemConfig.options.justify">
                <el-option value = "start" label = "左对齐"></el-option>
                <el-option value = "end" label = "右对齐"></el-option>
                <el-option value = "center" label = "居中"></el-option>
                <el-option value = "space-around" label = "两侧间隔相等"></el-option>
                <el-option value = "space-between" label = "两端对齐"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span = '12'>
            <el-form-item label = "垂直排列方式">
              <el-select v-model = "formItemConfig.options.align">
                <el-option value = "top" label = "顶部对齐"></el-option>
                <el-option value = "middle" label = "居中"></el-option>
                <el-option value = "bottom" label = "底部对齐"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </template>
      <template v-if = "formItemConfig.type != 'grid' && formItemConfig.type != 'table' && formItemConfig.type != 'pagination' && formItemConfig.type != 'tabs'">
        <el-form-item label = "操作属性">
          <!-- <el-checkbox v-model="formItemConfig.options.readonly" v-if="Object.keys(formItemConfig.options).indexOf('readonly')>=0">完全只读</el-checkbox> -->
          <el-checkbox v-model = "formItemConfig.options.disabled" v-if = "Object.keys(formItemConfig.options).indexOf('disabled')>=0">只读模式</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.filterable" v-if = "Object.keys(formItemConfig.options).indexOf('filterable')>=0">是否可搜索</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.showAdd" v-if = "Object.keys(formItemConfig.options).indexOf('showAdd')>=0">展示添加数据按钮</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.editable" v-if = "Object.keys(formItemConfig.options).indexOf('editable')>=0">文本框可输入</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.clearable" v-if = "Object.keys(formItemConfig.options).indexOf('clearable')>=0">显示清除按钮</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.isDelete" v-if = "Object.keys(formItemConfig.options).indexOf('isDelete')>=0">删除</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.isEdit" v-if = "Object.keys(formItemConfig.options).indexOf('isEdit')>=0">编辑</el-checkbox>
          <el-checkbox v-model = "formItemConfig.options.required" v-if = "Object.keys(formItemConfig.options).indexOf('required')>=0">必填</el-checkbox>
        </el-form-item>
        <el-form-item label = "正则验证" v-if = "Object.keys(formItemConfig.options).indexOf('pattern')>=0">
          <el-input size = "mini" v-model.lazy = "formItemConfig.options.pattern"  style = " width: 240px;" placeholder = "填写正则表达式"></el-input>
        </el-form-item>
      </template>
      <template v-if = "formItemConfig.type === 'listBoxTable'">
        <el-collapse v-model="activeServerNames4ListBoxTable">
          <el-collapse-item title="表头设定" name="ListBoxTableHeader">
            <div class = "addColumn">
              <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加表头</p>
            </div>
            <el-table :data = 'formItemConfig.options.tableHeader' style = "width:100%" empty-text = "暂无表头数据，请添加" border stripe>
              <el-table-column align = "center" prop = 'text' label = '表头名称'>
                <template slot-scope = "scope">
                  <el-input v-model = "scope.row.text" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'indexName' label = '表头键名'>
                <template slot-scope="scope">
                  <el-input v-model = "scope.row.indexName" placeholder = '请输入'></el-input>
                </template>
              </el-table-column>
               <el-table-column align = "center" prop = 'isFile' label = '是文件' width = '70px'>
              <template slot-scope = "scope">
                <el-switch v-model = "scope.row.isFile" @change = 'tableIsFile(scope.row)'></el-switch>
              </template>
              </el-table-column>
              <el-table-column align = "center" prop = 'isBoolean' label = 'isBoolean' width = '70px'>
                <template slot-scope = "scope">
                  <el-switch v-model = "scope.row.isBoolean" :disabled = 'scope.row.isFile'></el-switch>
                </template>
              </el-table-column>
              <el-table-column align = "center" label = "操作" width = "30">
                <template slot-scope = "scope">
                  <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                    <i class = "iconfont icon-shanchu"></i>
                  </el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-collapse-item>
          <el-collapse-item title="左侧List数据源" name="ListBoxRemote">
            <div class = 'formItem_hadPrepend'>
              <div style = 'margin-bottom: 6px'>
                <span style = 'display: inline-block; width: 80px;'>服务方法：</span>
                <el-select size = "mini" v-model="formItemConfig.leftDataOptions.remoteFunc" style = 'display: inline-block' clearable filterable>
                  <el-option v-for = 'eventItem in allEvents' :key = 'eventItem.no' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
                </el-select>
                <span style = 'display: inline-block; width: 90px;margin-left: 20px'>服务词典表：</span>
                <el-input type = "text" @focus = "setListBoxTableEventsDic('leftData')" value = '点击设置服务词典表' size = "mini" style = 'display: inline-block; width: auto'></el-input>
              </div>
              <div style = 'margin-bottom: 6px'>
                <span style = 'display: inline-block; width: 80px;'>value名称：</span>
                <el-input size = "mini" v-model = "formItemConfig.options.valueKey" style = 'display: inline-block; width: auto'></el-input>
                <span style = 'display: inline-block; width: 90px;margin-left: 20px'>label名称：</span>
                <el-input size = "mini" v-model = "formItemConfig.options.labelKey" style = 'display: inline-block; width: auto'></el-input>
              </div>
            </div>
          </el-collapse-item>
          <el-collapse-item title="右侧Table数据源" name="TableRemote">
            <div class = 'formItem_hadPrepend'>
              <div style = 'margin-bottom: 6px'>
                <span style = 'display: inline-block; width: 80px;'>服务方法：</span>
                <el-select size = "mini" v-model="formItemConfig.tableDataOptions.remoteFunc" style = 'display: inline-block' clearable filterable>
                  <el-option v-for = 'eventItem in allEvents' :key = 'eventItem.no' :label = 'eventItem.name' :value = 'eventItem.no'></el-option>
                </el-select>
                <span style = 'display: inline-block; width: 90px;margin-left: 20px'>服务词典表：</span>
                <el-input type = "text" @focus = "setListBoxTableEventsDic('tableData')" value = '点击设置服务词典表' size = "mini" style = 'display: inline-block; width: auto'></el-input>
              </div>
            </div>
          </el-collapse-item>
        </el-collapse>
      </template>
      <template v-if = "formItemConfig.type == 'tabs'">
        <el-form-item label = "定义Tabs">
          <div class = "addColumn">
            <p @click = "handleAddOption"> <i class = "iconfont icon-add"></i>添加tab页</p>
          </div>
          <el-table :data = 'formItemConfig.tabList' style = "width:100%" empty-text = "暂无tab页数据，请添加" border stripe>
            <el-table-column align = "center" prop = 'label' label = 'tab页名称'>
              <template slot-scope = "scope">
                <el-input v-model = "scope.row.label" placeholder = '请输入'></el-input>
              </template>
            </el-table-column>
            <el-table-column align = "center" label = "操作" width = "30">
              <template slot-scope = "scope">
                <el-button type = "text" size = "mini" @click = "handleOptionsRemove(scope.$index)" title = '移除'>
                  <i class = "iconfont icon-shanchu"></i>
                </el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-form-item>
      </template>
      <el-form-item label = "需要关联的元素" v-if = "Object.keys(formItemConfig).indexOf('relatedComponents')>=0 && formItemConfig.type !== 'editTable' && formItemConfig.type !== 'imgupload'">
        <div class = "addColumn">
          <p @click = "handleAddRelated"> <i class = "iconfont icon-add"></i>添加关联元素</p>
        </div>
        <el-table :data = 'formItemConfig.relatedComponents' style = "width:100%" empty-text = "暂无关系信息，请添加" border stripe>
          <el-table-column align = "center" prop = 'modelKey' label = '元素model'>
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.modelKey" placeholder = '请选择' @focus = 'getAllModelKey'>
                <el-option :label = 'modelItem' :value = 'modelItem' v-for = 'modelItem in allModelKey' :key = 'modelItem'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'relatedType' label = '关联方式'>
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.relatedType" placeholder = '请选择'>
                <el-option label = '检索' value = 'search'></el-option>
                <el-option label = '渲染' value = 'init'></el-option>
                <el-option label = '获取数据' value = 'getVal'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" prop = 'relatedKey' label = '关联字段'>
            <template slot-scope = "scope">
              <el-select v-model = "scope.row.relatedKey" multiple placeholder = '请选择' :disabled = "scope.row.relatedType !== 'search' || !scope.row.modelKey" @focus = 'getAllRelatedKey(scope.row.modelKey)'>
                <el-option :label = 'keyItem.text' :value = 'keyItem.indexName' v-for = "keyItem in allRelatedKey" :key = 'keyItem.indexName'></el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column align = "center" label = "操作" width = "30">
            <template slot-scope = "scope">
              <el-button type = "text" size="mini" @click = "handleRelatedRemove(scope.$index)" title = '移除'>
                <i class = "iconfont icon-shanchu"></i>
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
    </el-form>
    <!-- 可编辑的表格设置数据来源 -->
    <Edit-Table-Option :row = 'clickRow' :editTableOptionDialog = 'editTableOptionDialog' @giveUp = 'editTableOptionDialog = false' @sureSeetingEditTableOption = 'sureSeetingEditTableOption'></Edit-Table-Option>
    <!-- 设置联动方式 -->
    <Edit-Table-Linkage :row = 'clickRowLinkage' :linkageFrom = 'linkageFrom' :editTableLinkageDialog = 'editTableLinkageDialog' :clickTableColumns = 'clickTableColumns' @giveUpLinkage = 'editTableLinkageDialog = false' @sureSeetingEditTableLinkage = 'sureSeetingEditTableLinkage'></Edit-Table-Linkage>
    <!-- 设置下拉框的词典表时 -->
    <Event-Dic :row = 'selectEventsInfo' :eventDicDialog = 'eventDicDialog' @sureSeetingEventDic = 'sureSeetingEventDic' @giveUp = 'eventDicDialog = false'></Event-Dic>
  </div>
</template>

<script>
import Draggable from 'vuedraggable'
import EditTableOption from './EditTableSelectOption.vue'
import EditTableLinkage from './EditTableLinkage.vue'
import EventDic from '@/components/Events/EventsDic.vue'
export default {
  components: {
    Draggable, EditTableOption, EventDic, EditTableLinkage
  },
  props: ['formItemConfig', 'formDataList'],
  data () {
    return {
      validator: {
        type: null,
        required: null,
        pattern: null,
        range: null,
        length: null
      },
      // 所有的事件
      allEvents: [],
      props: { multiple: true },
      // 可关联的字段
      allRelatedKey: [],
      // 关联的model
      allModelKey: [],
      // 可编辑的表格设置数据来源时的弹窗
      editTableOptionDialog: false,
      clickRow: null,
      clickIndex: null,
      // 设置联动时的弹窗
      editTableLinkageDialog: false,
      clickTableColumns: null,
      clickRowLinkage: null,
      // 设置下拉框的词典表
      eventDicDialog: false,
      selectEventsInfo: {
        inputDic: [],
        outputDic: [],
        eventsNo: ''
      },
      // 设置的是可编辑的表格还是普通元素的联动效果
      linkageFrom: '',
      activeServerNames4ListBoxTable: []
    }
  },
  computed: {
    show () {
      if (this.formItemConfig && Object.keys(this.formItemConfig).length > 0) {
        this.getAllEvents()
        return true
      }
      return false
    }
  },
  methods: {
    // 表头的提示信息
    handelHelp (h, {column}) {
      if (column.labelClassName) {
        return (
          <el-tooltip effect="dark" placement="top">
            <div slot='content'>{column.labelClassName}</div>
            <span>{column.label}</span>
          </el-tooltip>
        )
      }
    },
    // 可编辑的表格设置选项时
    showSettingSelectOptionDialog (row, index) {
      this.clickRow = JSON.parse(JSON.stringify(row))
      this.clickIndex = index
      this.editTableOptionDialog = true
    },
    // 设置成功时
    sureSeetingEditTableOption (fromChild) {
      this.editTableOptionDialog = false
      this.formItemConfig.tableColumn[this.clickIndex].selectOption = {
        remote: fromChild.remote,
        remoteFunc: fromChild.remoteFunc,
        remoteOption: fromChild.remoteOption,
        remoteProps: fromChild.remoteProps,
        staticOption: fromChild.staticOption
      }
      this.$set(this.formItemConfig.tableColumn[this.clickIndex].selectOption, 'inputDic', fromChild.inputDic)
      this.$set(this.formItemConfig.tableColumn[this.clickIndex].selectOption, 'outputDic', fromChild.outputDic)
    },
    // 设置下拉框的词典表时
    setOptionsEventsDic () {
      if (this.formItemConfig.options.remote && !this.formItemConfig.options.remoteFunc) {
        this.$message({
          message: '请先选择服务方法',
          type: 'warning'
        })
      } else {
        this.selectEventsInfo = {
          inputDic: this.formItemConfig.options.inputDic.length ? JSON.parse(JSON.stringify(this.formItemConfig.options.inputDic)) : [],
          outputDic: this.formItemConfig.options.outputDic.length ? JSON.parse(JSON.stringify(this.formItemConfig.options.outputDic)) : [],
          eventsNo: this.formItemConfig.options.remoteFunc
        }
        this.eventDicDialog = true
      }
    },
    // 设置ListBoxTable左侧数据源事件词典表
    setListBoxTableEventsDic (curRemoteConfig) {
      this.formItemConfig.curRemoteConfig = curRemoteConfig
      if (curRemoteConfig === 'leftData') {
        if (!this.formItemConfig.leftDataOptions.remoteFunc) {
          this.$message({
            message: '请先选择服务方法',
            type: 'warning'
          })
        } else {
          this.selectEventsInfo = {
            inputDic: this.formItemConfig.leftDataOptions.inputDic.length ? JSON.parse(JSON.stringify(this.formItemConfig.leftDataOptions.inputDic)) : [],
            outputDic: this.formItemConfig.leftDataOptions.outputDic.length ? JSON.parse(JSON.stringify(this.formItemConfig.leftDataOptions.outputDic)) : [],
            eventsNo: this.formItemConfig.leftDataOptions.remoteFunc
          }
          this.eventDicDialog = true
        }
      } else {
        if (!this.formItemConfig.tableDataOptions.remoteFunc) {
          this.$message({
            message: '请先选择服务方法',
            type: 'warning'
          })
        } else {
          this.selectEventsInfo = {
            inputDic: this.formItemConfig.tableDataOptions.inputDic.length ? JSON.parse(JSON.stringify(this.formItemConfig.tableDataOptions.inputDic)) : [],
            outputDic: this.formItemConfig.tableDataOptions.outputDic.length ? JSON.parse(JSON.stringify(this.formItemConfig.tableDataOptions.outputDic)) : [],
            eventsNo: this.formItemConfig.tableDataOptions.remoteFunc
          }
          this.eventDicDialog = true
        }
      }
    },
    // 设置词典表成功时
    sureSeetingEventDic (fromSetting) {
      if (this.formItemConfig.type === 'listBoxTable') {
        if (this.formItemConfig.curRemoteConfig === 'leftData') {
          this.eventDicDialog = false
          this.formItemConfig.leftDataOptions.inputDic = fromSetting.inputDic
          this.formItemConfig.leftDataOptions.outputDic = fromSetting.outputDic
        } else {
          this.eventDicDialog = false
          this.formItemConfig.tableDataOptions.inputDic = fromSetting.inputDic
          this.formItemConfig.tableDataOptions.outputDic = fromSetting.outputDic
        }
      } else {
        this.eventDicDialog = false
        this.formItemConfig.options.inputDic = fromSetting.inputDic
        this.formItemConfig.options.outputDic = fromSetting.outputDic
      }
    },
    // 设置表格联动
    showSettingLinkageDialog (row, index) {
      this.clickTableColumns = JSON.parse(JSON.stringify(this.formItemConfig.tableColumn))
      for (let i = 0; i < this.formDataList.length; i++) {
        if (this.formDataList[i].name && this.formDataList[i].model) {
          let obj = {
            text: this.formDataList[i].name,
            indexName: this.formDataList[i].model
          }
          this.$set(this.clickTableColumns, this.clickTableColumns.length, obj)
        }
      }
      this.clickRowLinkage = JSON.parse(JSON.stringify(row))
      this.clickIndex = index
      this.linkageFrom = 'editTable'
      this.editTableLinkageDialog = true
    },
    // 设置成功时
    sureSeetingEditTableLinkage (fromChild) {
      this.editTableLinkageDialog = false
      if (this.linkageFrom === 'normal') {
        // 普通元素设置联动时
        this.formItemConfig.options.linkageOption = {
          isLinkage: fromChild.isLinkage,
          linkageEvents: fromChild.linkageEvents,
          // 联动方式分为四种，一种是获取后台数据进行结果渲染，一种是进行数值计算，一种显示隐藏，一种是改变数据源（针对下拉）
          linkageType: fromChild.linkageType,
          inputDic: fromChild.inputDic,
          outputDic: fromChild.outputDic,
          linkageElements: fromChild.linkageElements,
          expressionArray: fromChild.expressionArray,
          showExpression: fromChild.showExpression,
          sourceExpression: fromChild.sourceExpression
        }
      } else if (this.linkageFrom === 'editTable') {
        // 可编辑的表格设置联动时
        this.formItemConfig.tableColumn[this.clickIndex].linkageOption = {
          isLinkage: fromChild.isLinkage,
          linkageEvents: fromChild.linkageEvents,
          // 联动方式分为两种，一种是获取后台数据进行结果渲染，一种是进行数值计算
          linkageType: fromChild.linkageType,
          inputDic: fromChild.inputDic,
          outputDic: fromChild.outputDic,
          linkageElements: fromChild.linkageElements,
          expressionArray: fromChild.expressionArray
        }
      }
    },
    // 设置普通的表单联动
    showSettingNormalLinkageDialog () {
      this.linkageFrom = 'normal'
      this.clickRowLinkage = JSON.parse(JSON.stringify(this.formItemConfig.options))
      this.$set(this.clickRowLinkage, 'model', this.formItemConfig.model)
      let rowArray = []
      for (let i = 0; i < this.formDataList.length; i++) {
        if (this.formDataList[i].name && this.formDataList[i].model) {
          let obj = {
            text: this.formDataList[i].name,
            indexName: this.formDataList[i].model
          }
          rowArray.push(obj)
        }
      }
      if (rowArray.length) {
        this.clickTableColumns = JSON.parse(JSON.stringify(rowArray))
      }
      this.editTableLinkageDialog = true
    },
    // 获取所有的动态表单事件
    getAllEvents () {
      this.allEvents = []
      this.$get('/events4dform/alllist').then(data => {
        if (data.data.result.code === 'success') {
          this.allEvents = data.data.result.data
        } else if (data.data.result.code === 'failed') {
          this.$message({
            message: data.data.result.msg,
            type: 'warning'
          })
        }
      }).catch(error => {
        console.log(error)
      })
    },
    // 删除选项时
    handleOptionsRemove (index) {
      if (this.formItemConfig.type === 'grid') {
        this.formItemConfig.columns.splice(index, 1)
      } else if (this.formItemConfig.type === 'table' || this.formItemConfig.type === 'editTable') {
        this.formItemConfig.tableColumn.splice(index, 1)
      } else if (this.formItemConfig.type === 'tabs') {
        this.formItemConfig.tabList.splice(index, 1)
      } else if (this.formItemConfig.type === 'listBoxTable') {
        this.formItemConfig.options.tableHeader.splice(index, 1)
      } else {
        this.formItemConfig.options.options.splice(index, 1)
      }
    },
    // 新增选项时
    handleAddOption () {
      if (this.formItemConfig.type === 'table') {
        this.formItemConfig.tableColumn.push({
          text: '',
          indexName: '',
          isFile: false,
          isBoolean: false
        })
      } else if (this.formItemConfig.type === 'editTable') {
        this.formItemConfig.tableColumn.push({
          text: '',
          indexName: '',
          uiType: 'input',
          selectOption: {
            remote: false,
            remoteFunc: '',
            remoteOption: [],
            inputDic: [],
            outputDic: [],
            remoteProps: {
              value: null,
              label: null
            },
            staticOption: [
              {
                value: null,
                lable: null
              }
            ]
          },
          linkageOption: {
            isLinkage: false,
            linkageEvents: '',
            // 联动方式分为两种，一种是获取后台数据进行结果渲染，一种是进行数值计算
            linkageType: 'eventRender',
            expressionArray: [],
            inputDic: [],
            outputDic: [],
            linkageElements: [],
            expressionElements: []
          }
        })
      } else if (this.formItemConfig.type === 'tabs') {
        this.$set(this.formItemConfig.tabList, this.formItemConfig.tabList.length, {
          label: '新增tab页名称',
          list: []
        })
      } else if (this.formItemConfig.type === 'listBoxTable') {
        this.formItemConfig.options.tableHeader.push({
          text: '',
          indexName: ''
        })
      } else {
        this.formItemConfig.options.options.push({
          value: null,
          label: null
        })
      }
    },
    // 当表格的栏位为文件时
    tableIsFile (row) {
      if (row.isFile) {
        row.isBoolean = false
      }
    },
    // 获取所有可关联的model
    getAllModelKey () {
      this.allModelKey = []
      if (this.formDataList.length) {
        this.formDataList.forEach(item => {
          this.allModelKey.push(item.model)
        })
      }
    },
    // 获取可选的关联字段
    getAllRelatedKey (modelKey) {
      this.allRelatedKey = []
      for (let i = 0; i < this.formDataList.length; i++) {
        if (modelKey === this.formDataList[i].model && Object.keys(this.formDataList[i]).indexOf('tableColumn') >= 0) {
          this.allRelatedKey = this.formDataList[i].tableColumn
        }
      }
    },
    // 新增关联的元素
    handleAddRelated () {
      this.formItemConfig.relatedComponents.push({
        modelKey: '',
        relatedType: '',
        relatedKey: null
      })
    },
    // 删除关联元素选项时
    handleRelatedRemove (index) {
      this.formItemConfig.relatedComponents.splice(index, 1)
    },
    // 新增栅格布局的行
    handleAddColumn () {
      this.formItemConfig.columns.push({
        span: '',
        isButtonGroup: false,
        list: []
      })
    },
    generateRule () {
      if (this.formItemConfig && Object.keys(this.formItemConfig).length > 0) {
        this.formItemConfig.rules = []
        Object.keys(this.validator).forEach(key => {
          if (this.validator[key]) {
            this.formItemConfig.rules.push(this.validator[key])
          }
        })
      }
    },
    handleSelectMuliple (value) {
      if (value) {
        if (this.formItemConfig.options.defaultValue) {
          this.formItemConfig.options.defaultValue = [this.formItemConfig.options.defaultValue]
        } else {
          this.formItemConfig.options.defaultValue = []
        }
      } else {
        if (this.formItemConfig.options.defaultValue.length > 0) {
          this.formItemConfig.options.defaultValue = this.formItemConfig.options.defaultValue[0]
        } else {
          this.formItemConfig.options.defaultValue = ''
        }
      }
    },
    validateRequired (val) {
      if (val) {
        this.validator.required = {required: true, message: `${this.formItemConfig.name}必须填写`}
      } else {
        this.validator.required = null
      }
      this.$nextTick(() => {
        this.generateRule()
      })
    },
    validateDataType (val) {
      if (!this.show) {
        return false
      }
      if (val) {
        this.validator.type = {type: val, message: this.formItemConfig.name + '格式不正确'}
      } else {
        this.validator.type = null
      }
      this.generateRule()
    },
    valiatePattern (val) {
      if (!this.show) {
        return false
      }
      if (val) {
        this.validator.pattern = {pattern: val, message: this.formItemConfig.name + '格式不匹配'}
      } else {
        this.validator.pattern = null
      }
      this.generateRule()
    }
  },
  watch: {
    'formItemConfig.options.isRange': function (val) {
      if (typeof val !== 'undefined') {
        if (val) {
          this.formItemConfig.options.defaultValue = null
        } else {
          if (Object.keys(this.formItemConfig.options).indexOf('defaultValue') >= 0) {
            this.formItemConfig.options.defaultValue = ''
          }
        }
      }
    },
    'formItemConfig.options.required': function (val) {
      this.validateRequired(val)
    },
    'formItemConfig.options.formItemConfigType': function (val) {
      this.validateDataType(val)
    },
    'formItemConfig.options.pattern': function (val) {
      this.valiatePattern(val)
    },
    'formItemConfig.name': function (val) {
      if (this.formItemConfig.options) {
        this.validateRequired(this.formItemConfig.options.required)
        this.validateDataType(this.formItemConfig.options.dataType)
        this.valiatePattern(this.formItemConfig.options.pattern)
      }
    },
    'formItemConfig.config': function (val) {
      console.log(val)
    }
  }
}
</script>
